<template>
  <div class="app-container">
  	<div class="filter-container">
  		<el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" @click="handleEdit('create')">{{$t('table.add')}}</el-button>
  	</div>

    <el-tabs v-model="activeName" type="border-card" @tab-click="getList">
      <el-tab-pane v-for="item in typeOptions" :label="item.label" :key="item.value" :name="item.label">
        <keep-alive>

          <el-table
          v-loading="listLoading"
          :key="tableKey"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
          @sort-change="sortChange"
          >
          <el-table-column :label="$t('table.id')" prop="id" sortable="id" align="center" width="65">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.title')" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('category.description')" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.description }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('category.type')" prop="type" sortable="type" align="center">
            <template slot-scope="scope">
              <template v-for="(item,key) in typeOptions">
                <span v-if="item.value==scope.row.type">{{ item.label }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.actions')" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="handleEdit('update', scope.row)">{{ $t('table.edit') }}</el-button>
              <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handleDelete(scope.row)">{{ $t('table.delete') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <Pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

        </keep-alive>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 85%; margin-left:50px;">
        <el-form-item :label="$t('table.title')" prop="title">
          <el-input v-model="temp.title"/>
        </el-form-item>
        <el-form-item :label="$t('category.description')" prop="description">
          <el-input type="textarea" v-model="temp.description"></el-input>
        </el-form-item>
        <el-form-item :label="$t('category.type')" prop="type">
          <el-select v-model="temp.type" :selected="temp.type" class="filter-item" placeholder="Please select">
            <el-option v-for="item in typeOptions" :key="item.key" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="editData">{{ $t('table.confirm') }}</el-button>
      </div>
    </el-dialog>

</div>
</template>

<script>

import { fetchList } from '@/api/category'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import Dropzone from '@/components/Dropzone'

export default {
	components: { Pagination,Dropzone },
	directives: { waves },
	data() {
		return {
      resource:'categories',

      //tab
      activeName:'Shop',
      typeOptions: [
        {label:'Shop',value:1}
      ],

      //list data
			tableKey: 0,
			list: null,
			total: 0,
			listLoading: false,
			listQuery: {
				page: 1,
				limit: 20,
				sort: '-id',
        type: 1
			},

      //edit data
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: 'Edit Category',
        create: 'Add Category'
      },
		}
	},
	created() {
		this.getList()
	},
	methods: {
	    getList() {
        //tab extra
        helper.setTabQuery(this.typeOptions,'type',this)

	    	helper.getList(fetchList,this);
	    },
      getDefaultTemp() {
        return {
          id: undefined,
          title: '',
          description: '',
          type: 1
        };
      },
      handleEdit(type,row){
        helper.handleEdit(type, row, this);
      },
      handleDelete(row){
        helper.handleDelete(this.resource, row ,this);
      },
      editData(){
        helper.updateResource(this.resource,this.temp,this)
      },
      sortChange(data) {
        helper.handleSortChange(data,this)
      }
  },
}
</script>
